<script setup>
import { StarFilled, ShoppingCart, ArrowDown } from '@element-plus/icons-vue'
import { itemAllService } from '@/api/item'
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'

const greeting = ref('')
const setGreeting = () => {
  const now = new Date()
  const hours = now.getHours()

  if (hours >= 6 && hours < 11) {
    greeting.value = '早上好'
  } else if (hours >= 11 && hours < 13) {
    greeting.value = '中午好'
  } else if (hours >= 13 && hours < 18) {
    greeting.value = '下午好'
  } else if (hours >= 18 && hours < 24) {
    greeting.value = '晚上好'
  } else {
    greeting.value = '凌晨好'
  }
}

const userStore = useUserStore()

const isLoggedIn = ref(userStore.user.token === undefined || false)

console.log(userStore.user.token === undefined)

const items = ref([])
const getAllItem = async () => {
  const res = await itemAllService()
  items.value = res.data.list.map((item) => {
    return {
      ...item,
      price: (item.price / 100).toFixed(2)
    }
  })
}
const router = useRouter()

const login = () => {
  router.push('/login')
}

const goItem = (itemId) => {
  router.push(`/item/${itemId}`)
}

const cart = () => {
  router.push('/cart')
}

const name = ref('')
const picture = ref('')
const num = ref(0)

onMounted(() => {
  setGreeting()
  getAllItem()
  name.value = userStore.user.username || '亲，请登录'
  picture.value = userStore.user.picture || 'src/assets/logout.jpg'
  if (userStore.num !== undefined) {
    num.value = userStore.num
    // console.log(userStore.num)
  }
})

const goM = () => {
  router.push('/hot')
}
</script>

<template>
  <div id="app">
    <div class="container">
      <div class="taobao-header">
        <div class="top-bar">
          <span>中国大陆</span><el-icon class="xia"><ArrowDown /></el-icon>
          <span class="highlight" @click="login">{{ name }}</span>
          <span>免费注册</span>
          <span>手机逛微购</span>
          <span>网页无障碍</span>
          <span class="separator">|</span>
          <span>我的微购</span><el-icon class="xia"><ArrowDown /></el-icon> <el-icon class="shop"><ShoppingCart /></el-icon
          ><span @click="cart" style="cursor: pointer">购物车</span> <el-icon><StarFilled /></el-icon><span>收藏夹</span><el-icon class="xia"><ArrowDown /></el-icon>
          <span>商品分类</span>
          <span>免费开店</span><el-icon class="xia"><ArrowDown /></el-icon>
          <span
            >千牛卖家中心<el-icon><ArrowDown class="xia" /></el-icon></span
          ><el-icon class="xia"><ArrowDown /></el-icon> <span>帮助中心</span><el-icon class="xia"><ArrowDown /></el-icon>
        </div>
        <div class="logo-search-nav">
          <div class="logo">
            <img src="@/assets/logo.png" alt="logo" class="logo-img" />
          </div>
          <div class="search-nav">
            <el-input placeholder="宝贝" v-model="searchQuery" class="search-input">
              <template v-slot:append>
                <el-button @click="handleSearch">搜索</el-button>
              </template>
            </el-input>
            <div class="nav-links">
              <span>连衣裙</span>
              <span>男鞋</span>
              <span>零食</span>
              <span>T恤</span>
              <span>充电宝</span>
              <span>风扇</span>
              <span>拖鞋</span>
              <span>耳机</span>
              <span>防晒衣</span>
              <span>洗发水</span>
              <span>鼠标</span>
              <span>凉鞋</span>
              <span>洞洞鞋</span>
              <span>凉席</span>
              <span>U盘</span>
            </div>
          </div>
          <div class="banner-placeholder"></div>
        </div>
      </div>
    </div>

    <div class="head-container">
      <div class="left-sidebar">
        <!-- 左侧内容 -->
        <div class="category">
          <div class="category-header">
            <span>分类</span>
            <span class="new-badge">NEW</span>
          </div>
          <ul class="category-list">
            <li><i class="icon icon-computer"></i> 电脑 / 办公 / 文具</li>
            <li><i class="icon icon-industry"></i> 工业品 / 商业 / 定制</li>
            <li><i class="icon icon-appliances"></i> 家电 / 手机 / 数码</li>
            <li><i class="icon icon-furniture"></i> 家具 / 家装 / 家居</li>
            <li><i class="icon icon-clothing"></i> 女装 / 男装 / 内衣</li>
            <li><i class="icon icon-shoes"></i> 女鞋 / 男鞋 / 运动</li>
            <li><i class="icon icon-car"></i> 汽车 / 珠宝 / 箱包</li>
            <li><i class="icon icon-food"></i> 食品 / 生鲜 / 健康</li>
            <li><i class="icon icon-baby"></i> 母婴 / 童装 / 潮玩</li>
            <li><i class="icon icon-beauty"></i> 美妆 / 洗护 / 宠物</li>
            <li><i class="icon icon-entertainment"></i> 娱乐 / 图书 / 鲜花</li>
          </ul>
        </div>
      </div>
      <div class="main-content">
        <!-- 中间内容 -->
        <img src="@/assets/main.png" alt="" class="main-picture" />
      </div>
      <div class="right-sidebar">
        <!-- 右侧内容 -->
        <div class="user-info">
          <div class="user-avatar">
            <img :src="picture" alt="avatar" />
          </div>
          <div class="user-greeting">{{ greeting }}</div>
          <div class="user-actions">
            <div v-if="isLoggedIn">
              <button class="login-btn" @click="login">登录</button>
              <button class="register-btn">注册</button>
              <button class="open-store-btn">开店</button>
            </div>

            <div v-else>
              <div class="user-stats">
                <div @click="cart" style="cursor: pointer">
                  <div class="stat-item">
                    <span class="stat-number">{{ num }}</span>
                    <span class="stat-label">购物车</span>
                  </div>
                </div>
                <div class="stat-item">
                  <span class="stat-number">0</span>
                  <span class="stat-label">待收货</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">0</span>
                  <span class="stat-label">待发货</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">0</span>
                  <span class="stat-label">待付款</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">0</span>
                  <span class="stat-label">待评价</span>
                </div>
              </div>
            </div>
          </div>
          <div class="user-links">
            <div class="link-item">
              <i class="icon icon-star"></i>
              <span>宝贝收藏</span>
            </div>
            <div class="link-item">
              <i class="icon icon-shop"></i>
              <span>买过的店</span>
            </div>
            <div class="link-item">
              <i class="icon icon-fav-shop"></i>
              <span>收藏的店</span>
            </div>
            <div class="link-item">
              <i class="icon icon-footprint"></i>
              <span>我的足迹</span>
            </div>
          </div>
        </div>

        <div class="topic-list">
          <div class="topic-header">
            <span>微江湖</span>
            <span class="topic-tag">话题榜</span>
            <span class="more-link">更多 ></span>
          </div>
          <ul class="topic-items">
            <li>
              <span class="hot-tag">热门</span>
              <a href="#">致微购用户的一封信...</a>
            </li>
            <li>
              <span class="hot-tag">热门</span>
              <a href="#">一天卖10万，越卜越好卖...</a>
            </li>
            <li>
              <span class="hot-tag">热门</span>
              <a href="#">第一次感受到气候对发型...</a>
            </li>
            <li>
              <span class="hot-tag">热门</span>
              <a href="#">女朋友爱看欧洲杯的原因...</a>
            </li>
            <li>
              <span class="hot-tag">热门</span>
              <a href="#">震惊，东软竟出一位编程大牛...</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="tj-container">
      <div class="recommendations">
        <div class="recommendation-item" style="cursor: pointer" @click="goM">
          <img src="@/assets/love.png" alt="item1" />
          <div class="text">
            <div class="title">秒杀专区</div>
            <div class="subtitle">限时发放福利</div>
          </div>
        </div>
        <div class="recommendation-item">
          <img src="@/assets/iphone.png" alt="item1" />
          <div class="text">
            <div class="title">潮电数码</div>
            <div class="subtitle">玩点新科技</div>
          </div>
        </div>
        <div class="recommendation-item">
          <img src="@/assets/iclothes.png" alt="item2" />
          <div class="text">
            <div class="title">服饰时尚</div>
            <div class="subtitle">大牌直降</div>
          </div>
        </div>
        <div class="recommendation-item">
          <img src="@/assets/ishose.png" alt="item3" />
          <div class="text">
            <div class="title">运动户外</div>
            <div class="subtitle">夏日超清凉</div>
          </div>
        </div>
        <div class="recommendation-item">
          <img src="@/assets/ipaper.png" alt="item4" />
          <div class="text">
            <div class="title">精致护理</div>
            <div class="subtitle">品质生活</div>
          </div>
        </div>
        <div class="recommendation-item">
          <img src="@/assets/ibottle.png" alt="item5" />
          <div class="text">
            <div class="title">家享生活</div>
            <div class="subtitle">大牌精选好物</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="item-container">
    <div class="product-list">
      <div @click="goItem(product.id)" class="product-item" v-for="product in items" :key="product.id">
        <img :src="product.image" :alt="product.name" class="product-image" />
        <div class="product-info">
          <div class="product-name">{{ product.name }}</div>
          <div class="product-price"><span>￥</span>{{ product.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  padding: 0 95px;
}

.taobao-header {
  width: 100%;
  background-color: #f5f5f5;
}

.top-bar {
  display: flex;
  justify-content: flex-start;
  background-color: #e8e6e2;
  padding: 5px 20px;
  padding-left: 50px;
  border-bottom: 1px solid #eee;
}

.top-bar span {
  margin-right: 8px;
  color: #666;
  font-size: 12.5px;
}
.top-bar .highlight {
  color: red;
}

.top-bar .separator {
  color: #fff;
  margin: 0 150px;
}
.logo-search-nav {
  display: flex;
  align-items: center;
  padding: 5px 0;
  background-color: #e8e6e2;
}

.logo {
  margin-right: 80px;
  margin-left: 60px;
}

.logo-img {
  height: 70px;
}

.search-nav {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.search-input {
  width: 740px; /* 调整宽度 */
  height: 38px; /* 调整高度 */
}

.nav-links {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.nav-links span {
  font-size: 12px;
  margin-left: 15px;
  color: #65738a;
}

.banner-placeholder {
  width: 200px;
  height: 100px;
  background-color: #e8e6e2;
  text-align: center;
  line-height: 100px;
  color: #666;
  margin-left: 30px;
}
.icon,
.shop {
  margin-right: 5px;
  cursor: pointer;
}
.xia {
  font-size: 10px;
  margin-top: 4px;
  margin-right: 10px;
}

.head-container {
  display: flex;
  justify-content: space-between;
  padding: 15px 95px;
}

.left-sidebar {
  background-color: #f5f5f5;
  padding: 8px 15px;
}

.main-content {
  flex-grow: 1;
  background-color: #f5f5f5;
  padding: 10px;
  margin: 0 10px;
}

.right-sidebar {
  width: 280px;
  background-color: #f5f5f5;
  padding: 10px;
}

.category {
  height: 492px;
  background-color: #fff;
  border-radius: 5px;
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.category-header span:first-child {
  font-weight: bold;
  font-size: 16px;
}

.new-badge {
  width: 22px;
  height: 12px;
  margin-left: 5px;
  background-color: #ff6600;
  color: #fff;
  font-size: 8px;
  align-items: center;
  padding: 1px 3px;
  border-radius: 3px;
}

.category-list {
  width: 180px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
}

.category-list li i {
  margin-right: 8px;
}

.icon {
  width: 20px;
  height: 20px;
}

.icon-computer {
  background: url('@/assets/computer.png') no-repeat center center;
}
.icon-industry {
  background: url('@/assets/hole.png') no-repeat center center;
}
.icon-appliances {
  background: url('@/assets/phone.png') no-repeat center center;
}
.icon-furniture {
  background: url('@/assets/chair.png') no-repeat center center;
}
.icon-clothing {
  background: url('@/assets/clothes.png') no-repeat center center;
}
.icon-shoes {
  background: url('@/assets/shose.png') no-repeat center center;
}
.icon-car {
  background: url('@/assets/car.png') no-repeat center center;
}
.icon-food {
  background: url('@/assets/apple.png') no-repeat center center;
}
.icon-baby {
  background: url('@/assets/bottle.png') no-repeat center center;
}
.icon-beauty {
  background: url('@/assets/wash.png') no-repeat center center;
}
.icon-entertainment {
  background: url('@/assets/book.png') no-repeat center center;
}
.main-picture {
  width: 750px;
  height: 455px;
}

.user-info {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  padding-top: 10px;
  text-align: center;
}

.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.user-greeting {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

.user-actions {
  margin-top: 15px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #333;
}

.user-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.login-btn {
  margin: 0 2px;
  background-color: #ff6600;
  color: #fff;
}

.register-btn {
  margin: 0 2px;
  background-color: #ffcc00;
  color: #fff;
}

.open-store-btn {
  margin: 0 2px;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
  color: #333;
}

.user-links {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.link-item i {
  font-size: 20px;
  margin-bottom: 5px;
}

.icon {
  width: 28px;
  height: 26px;
}

.icon-star {
  background: url('@/assets/star.png') no-repeat center center;
}
.icon-shop {
  background: url('@/assets/box.png') no-repeat center center;
}
.icon-fav-shop {
  background: url('@/assets/fav-shop.png') no-repeat center center;
}
.icon-footprint {
  background: url('@/assets/footprint.png') no-repeat center center;
}

.topic-list {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.topic-header span {
  font-size: 14px;
}

.topic-tag {
  background-color: #ff6600;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
}

.more-link {
  font-size: 12px;
  color: #666;
}

.topic-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-items li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.hot-tag {
  background-color: #ff6600;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 5px;
}

.topic-items a {
  font-size: 12px;
  color: #333;
  text-decoration: none;
}

.topic-items a:hover {
  text-decoration: underline;
}

.tj-container {
  display: flex;
  flex-direction: column;
  padding: 0 95px;
}

.recommendations {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.recommendation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.recommendation-item img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.recommendation-item .icon img {
  width: 40px;
  height: 40px;
}

.recommendation-item .title {
  font-size: 14px;
  color: #333;
  margin-top: 10px;
}

.recommendation-item .subtitle {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.item-container {
  padding: 0 95px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 10px;
}

.product-item {
  width: 20%;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.product-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.product-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
  margin-bottom: auto; /* 将产品名称与价格之间的空间推开 */
}

.product-price {
  font-size: 20px;
  color: #ff6600;
  margin-top: 5px;
}
</style>
